<!--
* @description 选择合同列表
  @params dialogFormVisible 显示
  @params saveFn 存储方法
  @params apiName_params 列表接口名
!-->

<!-- 单页面需要多个上传组件 -->
<template>
  <div>
    <el-dialog :title="'事件上报-党政统领'" width='70%' :visible.sync="dialogFormVisible">
      <div>

        <!-- 表格 -->
        <div style="margin-top: 10px">
          <el-table :data="tableData" style="width: 100%" class="tableScroll" highlight-current-row
            @current-change="tableSelect">
            <el-table-column prop="name" label="事件名称"></el-table-column>
            <el-table-column prop="happend_time" label="发生时间"></el-table-column>
            <el-table-column prop="address" label="发生地址"></el-table-column>
            <el-table-column prop="grid_name" label="网格"></el-table-column>
            <el-table-column prop="second_grid_name" label="微网格"></el-table-column>
            <el-table-column prop="remark" label="描述"></el-table-column>

          </el-table>
        </div>
        <!-- 分页 -->
        <div v-if="tableData.total" class="block" style="margin-top: 10px; text-align: right">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchList.current" :page-size="searchList.size"
            layout="sizes,total, prev, pager, next, jumper" :page-sizes="[7, 20, 30, 40]"
            :total="Number(tableData.total)"></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="confirm()">确 定</el-button>
				<el-button @click="dialogFormVisible = false">取 消</el-button> -->
      </div>
    </el-dialog>
    <detailComp :title="'家庭成员'" ref="updateComp"></detailComp>

  </div>
</template>
<script>
import detailComp from "./detail.vue";
export default {
  name: "page",
  components: {
    detailComp,
  },
  props: {
    apiName_params: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableData: [],
      searchList: {
        current: 1,
        size: 7,
      },
      inputModel: {},
      infoList: {},
      dialogFormVisible: false,
      dataRow: "",
    };
  },
  created() {},
  methods: {
    hide: function () {
      // this.$emit("refresh");
    },
    detailShow: function (row) {
      const inputModel = row;
      this.$refs.updateComp.show();
      setTimeout(() => {
        this.$refs.updateComp.initData({
          inputModel: inputModel,
        });
      }, 0);
    },
    confirm() {
      this.$emit("saveFn", this.inputModel);
      this.hide();
    },
    /**
     * 初始化数据
     */
    initData: function ({ type }) {
      this.searchList.type = type;
      this.getData();
    },
    show: function (type, id) {
      this.dialogFormVisible = true;
      // this.clearData();
      // this.$emit('hide');
    },
    /**
     * 关闭弹出框
     */
    hide: function () {
      // this.clearData();
      this.dialogFormVisible = false;
    },
    //增加搜索条件
    addSearchCriteria(key, value) {
      this.searchList[key] = value;
      console.log(this.searchList);
    },
    tableSelect(val) {
      this.inputModel = val;
    },
    //分页选择每页多少条
    handleSizeChange(val) {
      this.searchList.size = val;
      this.getData();
    },
    //分页当前页
    handleCurrentChange(val) {
      this.searchList.current = val;
      this.getData();
    },
    getData(current) {
      var apiName = "page_govEvent";

      var params = this.searchList;
      this.$myApi[apiName](params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
        }
      });
    },
  },
};
</script>
<style>
</style>
